<script setup lang="ts">
import {  provide, ref } from "vue";
import { io } from 'socket.io-client'
import axios from 'axios'
const throughGatewayFlag = false
const uri = throughGatewayFlag ? 'http://localhost:9002' : 'http://127.0.0.1:8080'
const ioInstance = io(uri + '/ct', {
  autoConnect: true,
})

ioInstance.on('connect', () => {
  console.log('io connected, add socket io id to http header')
  axios.defaults.headers.common['socket_io_client_id'] = ioInstance.id;
})

function sendIoMsg(msg) {
  if (throughGatewayFlag) {
    const msgBody: any = {
      systemType: 'image',
      ...msg,
    }
    console.log('发送获取image消息', JSON.stringify(msg))
    ioInstance.emit('fe_gateway', JSON.stringify(msgBody))
  } else {
    ioInstance.send(msg)
  }
}

const cacheRoute = ref(['StackViewer', 'MprViewer', 'VolumeViewer'])

provide('pyImgHandlerIo', {
  throughGatewayFlag,
  baseUri: throughGatewayFlag ? 'http://localhost:9000' : 'http://127.0.0.1:8080',
  sendMsg: sendIoMsg,
  ioInstance: ioInstance,
})

</script>

<template>
  <router-view v-slot="{ Component }">
    <keep-alive :include="cacheRoute">
      <component :is="Component" />
    </keep-alive>
  </router-view>

</template>

<style>
.scan-tips p {
  font-size: 50px !important;
}
</style>
